<template>
  <div class="screen-bottom-right">
    <!-- <div class="screen-bottom-header flex-l">
      <div class="header-left flex-c">
        <i class="iconfont icon-chart-line"></i>
      </div>
      <div class="header-right flex-l">
        <span class="header-title">违章视频</span>
        <dv-decoration-3 class="dv-dec-3" />
      </div>
    </div> -->
    <!-- style="margin-top: 20px" -->
    <div class="screen-bottom-chart">
      <SwiperVideo />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, reactive, unref } from 'vue'
// import Chart from './chart/ChartBottomRight.vue'
// import { VideoPlayer } from '@/components/VideoPlayer'
// import { ElCarousel, ElCarouselItem } from 'element-plus'
import SwiperVideo from './swiperVideo.vue'
const intervalInstance = ref(0)
const chartData = reactive({
  year: 0,
  weekCategory: [] as Array<string>,
  radarData: [] as Array<Array<number>>,
  radarDataAvg: [] as Array<Array<number>>,
  maxData: 12000,
  weekMaxData: [] as Array<number>,
  weekLineData: [] as Array<number>
})

// methods
const confirmChartData = () => {
  // 清空轮询数据
  chartData.weekCategory = []
  chartData.weekMaxData = []
  chartData.weekLineData = []
  chartData.radarData = []
  chartData.radarDataAvg = []

  const dateBase = new Date()
  chartData.year = dateBase.getFullYear()
  // 周数据
  for (let i = 0; i < 7; i++) {
    // 日期
    const date = new Date()
    chartData.weekCategory.unshift([date.getMonth() + 1, date.getDate() - i].join('/'))

    // 折线图数据
    chartData.weekMaxData.push(chartData.maxData)
    const distance = Math.round(Math.random() * 7000 + 500)
    chartData.weekLineData.push(distance)

    // 雷达图数据
    // 我的指标
    const averageSpeed = +(Math.random() * 5 + 3).toFixed(3)
    const maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2)
    const hour = +(distance / 1000 / averageSpeed).toFixed(1)
    const radarDayData = [distance, averageSpeed, maxSpeed, hour]
    chartData.radarData.unshift(radarDayData)

    // 平均指标
    const distanceAvg = Math.round(Math.random() * 8000 + 4000)
    const averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3)
    const maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2)
    const hourAvg = +(distance / 1000 / averageSpeed).toFixed(1)
    const radarDayDataAvg = [distanceAvg, averageSpeedAvg, maxSpeedAvg, hourAvg]
    chartData.radarDataAvg.unshift(radarDayDataAvg)
  }
}

// 定时函数
const startTimeInterval = () => {
  confirmChartData()
  intervalInstance.value = window.setInterval(() => {
    confirmChartData()
  }, 3000)
}

// 生命周期
onMounted(() => {
  startTimeInterval()
})

onUnmounted(() => {
  window.clearInterval(intervalInstance.value)
})
</script>

<style lang="scss" scoped>
@import '/src/assets/scss/common/variables.scss';
.flex-l {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.screen-bottom-right {
  // height: $box-height7;
  // width: $box-width3;
  // background-color: $theme-sub-color;
  margin: 5px;
  border-radius: 10px;

  .screen-bottom-header {
    height: $chart-header-height;

    .header-left {
      width: 10px;
    }

    .header-right {
      width: calc(100% - 40px);

      .header-title {
        color: #fff;
        font-size: $base-font-size;
      }

      .dv-dec-3 {
        width: 50px;
        height: 20px;
        margin-left: 10px;
      }
    }
  }

  .dtext {
    color: white;
    text-align: center;
    font-size: 40px;
    margin-top: 10vh;
  }
  .screen-bottom-chart {
    border-radius: 8px;
    overflow: hidden;
  }
}
</style>
